﻿$icon: get-name(navbar-toggler-icon);

.navbar-toggler {
    padding: 0.625rem 0.5rem;

    &.thin-toggler {
        &:hover {
            #{$icon} {
                background-color: $toggler-icon-hover-color;

                &::before,
                &::after {
                    background-color: $toggler-icon-hover-color;
                    width: 100%;
                }
            }
        }
    }
}

.navbar-toggler:not(:disabled):not(.disabled) {
    cursor: pointer;
}

#{$icon} {
    display: block;
    position: relative;
    min-height: 1px;
    border-radius: 0px;
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
}

.thick-toggler {
    #{$icon} {
        width: 1.875rem;
        height: 0.3rem;
        background-color: $white;

        &::before,
        &::after {
            content: '';
            display: block;
            width: 1.875rem;
            height: 0.3rem;
            position: absolute;
            background: #FFF;
            -webkit-transition-property: margin, -webkit-transform;
            transition-property: margin, -webkit-transform;
            transition-property: margin, transform;
            transition-property: margin, transform, -webkit-transform;
            -webkit-transition-duration: 300ms;
            transition-duration: 300ms;
        }

        &::before {
            margin-top: -0.625rem;
        }

        &::after {
            margin-top: 0.625rem;
        }
    }
}

.thin-toggler {
    #{$icon} {
        width: 1.625rem;
        height: 2px;
        background-color: $toggler-icon-color;

        &::before,
        &::after {
            content: '';
            display: block;
            position: absolute;
            left: auto;
            right: 0px;
            width: 100%;
            height: 2px;
            min-height: 1px;
            border-radius: 0px;
            transition: all .4s ease;
            -webkit-transition: all .4s ease;
            background-color: $toggler-icon-color;
        }

        &::before {
            width: 50%;
            margin-top: -0.5rem;
        }

        &::after {
            width: 75%;
            margin-top: 0.5rem;
        }
    }
}
//导航条合拢时*/
#{get-name(nav-collapse)} {

    .thin-toggler {
        #{$icon} {
            &::before,
            &::after {
                left: 0;
                right: auto;
            }
        }
    }

    .nav-link {
        text-align: center;
    }

    .navbar-brand,
    #{get-name(nav-text)} {
        display: none;
    }

    &#{get-name(aside)} {
        width: 4.25rem;
    }

    #{get-name(aside-menu)} {
        &:hover {
            width: 13.75rem;

            #{get-name(nav-text)} {
                display: initial;
            }
        }
    }
}

//bootstrap面包屑导航
.breadcrumb {
    border-radius: unset;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}
.breadcrumb-item {
    color: #8c8ea4;

    .active {
        color: #716aca;
    }
}
//侧边
$aside: get-name(aside);
$aside-fixed: get-name(aside-fixed);
$aside-menu: get-name(aside-menu);
$aside-brand: get-name(aside-brand);
#{$aside-brand} {
    padding-left: 1rem;
    padding-right: 1rem;
    height: $header-hight;
}
#{get-name(nav-text)} {
    font-weight: 400;
    font-size: 0.825em;
    text-transform: initial;
}
#{$aside},
#{$aside-fixed},
#{$aside-menu} {
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
}
#{$aside-menu} {
    width: $width-100;
}
#{$aside},
#{$aside-fixed} {
    width: 13.75rem;
    top: 0;
    z-index: 1030;
    height: $height-100;
}
#{$aside-fixed} {
    position: fixed;
}
.nav-item {
    &.active {
        .nav-link {
            color: #716aca;
        }
    }

    &:not(.active):hover {
        transition: background-color 0.3s;
        -webkit-transition: background-color 0.3s;
        background-color: $dark;

        .nav-link {
            color: #716aca;
        }
    }
}
.nav-link {
    color: #8c8ea4;
}